<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="用户ID" v-model="listQuery.userId">
      </el-input>
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="电话" v-model="listQuery.phone">
      </el-input>
      <el-select clearable  @change='handleFilter' class="filter-item" style="width: 130px" v-model="listQuery.status" placeholder="提现状态">
        <el-option label="处理中" value="0">
        </el-option>
        <el-option label="提现成功" value="1">
        </el-option>
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
      <!--<el-button class="filter-item" type="primary" :loading="downloadLoading"  icon="el-icon-download" @click="">导出</el-button>-->
    </div>

    <el-table :data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)"
              v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row >
      <el-table-column align="center" label='排序ID' width="75">
        <template slot-scope="scope">
          {{scope.$index}}
        </template>
      </el-table-column>
      <el-table-column label="用户ID" width="85" align="center">
        <template slot-scope="scope">
          {{scope.row.userId}}
        </template>
      </el-table-column>
      <el-table-column label="用户名" width="100" align="center">
        <template slot-scope="scope">
          {{scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column label="电话" width="120" align="center">
        <template slot-scope="scope">
          {{scope.row.phone}}
        </template>
      </el-table-column>

      <el-table-column label="收款号" width="150" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.number}}</span>
        </template>
      </el-table-column>

      <el-table-column label="提现金额" width="100" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.money}}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="提现状态" width="100" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{scope.row.status === 0 ? '处理中' : '提现成功'}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="申请时间" width="160" align="center">
        <template slot-scope="scope">
          {{scope.row.time}}
        </template>
      </el-table-column>

      <el-table-column label="备注" width="150" align="center">
        <template slot-scope="scope">
          {{scope.row.content}}
        </template>
      </el-table-column>

      <el-table-column  label="操作"  align="center" >
        <template slot-scope="scope">
          <el-button :disabled="scope.row.status === 1" type="danger" @click="handleUpdate(scope.row)" size="mini">处理提现</el-button>
        </template>
      </el-table-column>

    </el-table>

    <div style="padding-top: 15px;text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=currentPage
        :page-sizes="[10, 20, 30]"
        :page-size=pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
    </div>

    <el-dialog title="编辑提现信息" :visible.sync="dialogFormVisible">
      <el-form :rules="rules" ref="dataForm" :model="temp" label-position="right" label-width="100px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="提现状态：" prop="status">
          <el-select class="filter-item" prop="status" v-model="temp.status" placeholder="请选择">
            <el-option
              v-for="item in status"
              :key="item.val"
              :label="item.status"
              :value="item.val">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="dialogFormVisible = false">取消</el-button>
        <el-button  :loading="buttonLoading" type="primary" @click="updateData">确认提现</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<style>

  .filter-container{
    padding-bottom: 20px;
  }

</style>

<script>
import { List, Merge } from '../../api/liftCash'
import { splice } from '../../utils/common'

export default {

  data() {
    return {
      list: [],
      listLoading: true,
      buttonLoading: false,
      isDisabled: false,
      listQuery: {
        userId: null,
        phone: null,
        status: null
      },
      temp: {
        liftCashId: null,
        userId: '',
        name: '',
        phone: '',
        status: '',
        number: '',
        time: '',
        money: '',
        content: ''
      },
      dialogFormVisible: false,
      dialogStatus: '',
      downloadLoading: false,
      status: [
        { status: '处理中', val: 0 },
        { status: '提现成功', val: 1 }
      ],
      rules: {
        liftCashId: [{ required: true }],
        userId: [{ required: true }],
        name: [{ required: true }],
        phone: [{ required: true }],
        status: [{ required: true }],
        number: [{ required: true }],
        time: [{ required: true }],
        money: [{ required: true }],
        content: [{ required: true }]
      },
      total: 0,
      currentPage: 1,
      pageSize: 10
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        // draft: 'gray',
        0: 'warning'
      }
      return statusMap[status]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleFilter() {
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      List(this.listQuery.userId, this.listQuery.phone, this.listQuery.status).then(response => {
        this.list = response.data
        this.total = response.data.length
        this.currentPage = 1
        this.listLoading = false
        this.isDisabled = false
        // this.list.forEach((item) => {
        //   if (!item.status === 1) {
        //     this.isDisabled = false
        //   } else {
        //     this.isDisabled = true
        //   }
        // })
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    handleUpdate(row) {
      alert('温馨提示：您好！您正在操作积分提现状态修改，提现成功将以短信的形式通知用户提现信息，请谨慎操作.')
      this.resetTemp()
      this.temp = splice(this.temp, row)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    updateData() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.buttonLoading = true
          Merge(this.temp).then(res => {
            this.temp = res.data
            for (const v of this.list) {
              if (this.temp.userId === v.userId) {
                const index = this.list.indexOf(v)
                this.list.splice(index, 1, this.temp)
                break
              }
            }
            this.dialogFormVisible = false
            this.buttonLoading = false
            this.fetchData()
            this.$notify({
              title: '成功',
              message: '提现处理成功',
              type: 'success',
              duration: 2000
            })
          }).catch(reason => {
            console.log(reason)
            this.buttonLoading = false
          })
        }
      })
    },
    resetTemp() {
      this.temp = {
        liftCashId: null,
        userId: '',
        name: '',
        phone: '',
        status: '',
        number: '',
        time: '',
        money: '',
        content: ''
      }
    }
  }
}
</script>
